<template>
    <div class="box">
        <el-container>
            <!-- 头部 -->
            <el-header>
                <div class="tops">
                    <div class="lf">
                        <div class="ims">
                            <!-- 用户头像 -->
                            <img src="../assets/13.jpg" alt="">
                        </div>
                        <h3>电商后台管理系统</h3>
                    </div>

                    <div class="rt">
                        <el-button type="info" @click="quit">退出</el-button>
                    </div>
                </div>
            </el-header>
            <el-container>
                <!-- 侧边栏 -->
                <el-aside :width="this.isCollapse?'60px':'200px'">
                    
                    <span class="flexible" @click="flexible" :label="false">|&nbsp;|&nbsp;|&nbsp;</span>
                    <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" :router="true"
                        @close="handleClose" active-text-color="#409eff" :collapse="isCollapse" background-color="#333743" :unique-opened=true text-color="#fff">
                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-user-solid"></i>
                                <span slot="title" color="#fff">用户管理</span>
                            </template>
                                <el-menu-item index="/Users" class="el-icon-menu">用户列表</el-menu-item>
                        </el-submenu>

                        <el-submenu index="2">
                            <template slot="title">
                                <i class="el-icon-box"></i>
                                <span slot="title" color="#fff">权限管理</span>
                            </template>
                                <el-menu-item class="el-icon-menu" index="/Roles">角色列表</el-menu-item>
                                <el-menu-item class="el-icon-menu"  index="/Rights">权限列表</el-menu-item>
                        </el-submenu>

                        <el-submenu index="3">
                            <template slot="title">
                                <i class="el-icon-s-cooperation"></i>
                                <span slot="title" color="#fff">商品管理</span>
                            </template>
                                <el-menu-item class="el-icon-menu"  index="/Goods">商品列表</el-menu-item>
                                <el-menu-item class="el-icon-menu"  index="/Params">分类参数</el-menu-item>
                                <el-menu-item class="el-icon-menu"  index="/Categories">商品分类</el-menu-item>
                        </el-submenu>

                        <el-submenu index="4">
                            <template slot="title">
                                <i class="el-icon-s-order"></i>
                                <span slot="title" color="#fff">订单管理</span>
                            </template>
                                <el-menu-item class="el-icon-menu"  index="/Orders">订单列表</el-menu-item>
                        </el-submenu>

                        <el-submenu index="5">
                            <template slot="title">
                                <i class="el-icon-s-data"></i>
                                <span slot="title" color="#fff">数据统计</span>
                            </template>
                                <el-menu-item class="el-icon-menu"  index="/Reports">数据报表</el-menu-item>
                        </el-submenu>
                    </el-menu>

                </el-aside>
                <!-- 页面部分 -->
                <el-main>
                    <!-- 子路由跳转 -->
                    <router-view ></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script>
export default {
    data() {
        return {
            isCollapse: false
        }
    },
    methods: {
        // 侧边伸缩
        flexible(){
            this.isCollapse = !this.isCollapse
        },
        // 表格
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        // 退出
        quit(){
            localStorage.removeItem('token')
        }
    },
}
</script>
<style lang="scss" scoped>
.el-menu-item-group__title::v-deep{
    width: 0;
    height: 0;
    padding: 0;
}

.el-submenu__title span::v-deep{
    color: #fff;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}

.box {
    .tops {
        display: flex;
        justify-content: space-between;
        margin: 0 10px 0 0px;

        .lf {
            display: flex;

            h3 {
                color: #fff;
                padding-left: 8px;
                font-weight: 100;
            }

            .ims {
                width: 50px;
                height: 50px;
                margin-right: 10px;
                margin-top: 4px;
                box-shadow: 4px 3px 2px #B3C0D1;
                border-radius: 50%;

                img {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
            }
        }
    }
}

.el-header,
.el-footer {
    background-color: #373d41;
    color: #333;
    // text-align: center;
    line-height: 60px;
}

.el-aside {
    background-color: #333744;
    color: #333;
    text-align: center;
    // line-height: 200px;
    height: 92vh;
    overflow: hidden;
    .flexible{
        display: inline-block;
        height: 30px;
        line-height: 30px;
        width: 100%;
        color: #fff;
        background-color: #4a5064;
    }
}

.el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    // line-height: 160px;
    height: 92vh;
}
</style>